<template>
  <a-modal
    title="修改通道安全计划"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :visible="pSecPlanEditVisiable"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="安全计划类型" v-bind="formItemLayout">
            <a-input :disabled="true" v-decorator="['keyType']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="安全计划操作方式" v-bind="formItemLayout">
            <a-select v-decorator="['keyOprType']" @change="handleChange">
              <a-select-option value="E">加密</a-select-option>
              <a-select-option value="D">解密</a-select-option>
              <a-select-option value="A">加解密</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="安全计划用途" v-bind="formItemLayout">
            <a-select
              v-decorator="['keyUsage']"
              @change="handleChange"
              v-if="keyType == 'C'"
            >
              <a-select-option value="00">数字签名证书公钥</a-select-option>
              <a-select-option value="01">敏感信息加密证书公钥</a-select-option>
              <a-select-option value="10">数字签名证书私钥</a-select-option>
              <a-select-option value="11">敏感信息加密证书私钥</a-select-option>
            </a-select>
            <a-select
              v-decorator="['keyUsage']"
              @change="handleChange"
              v-if="keyType == 'K'"
            >
              <a-select-option value="00">机构主密钥</a-select-option>
              <a-select-option value="01">敏感信息加密密钥</a-select-option>
              <a-select-option value="02">转PIN密钥</a-select-option>
              <a-select-option value="03">MAC签名密钥</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
        <a-col :md="12" :sm="24">
          <a-form-item label="安全计划处理阶段" v-bind="formItemLayout">
            <a-select v-decorator="['secPlanStage']" @change="handleChange">
              <a-select-option value="00">报文解析前</a-select-option>
              <a-select-option value="11">报文组装后</a-select-option>
              <a-select-option value="01">报文解析后</a-select-option>
              <a-select-option value="10">报文组装前</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="安全计划描述" v-bind="formItemLayout">
            <a-input v-decorator="['secPlanDesc']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="安全记划状态" v-bind="formItemLayout">
            <a-select v-decorator="['secPlanStatus']" @change="handleChange">
              <a-select-option value="Y">有效</a-select-option>
              <a-select-option value="N">无效</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="证书编号" v-bind="formItemLayout">
            <a-input v-decorator="['certId']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="证书有效期" v-bind="formItemLayout">
            <a-input v-decorator="['certExpiryDate']" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="算法类型" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'certAlgorithmType',
                {
                  rules: [{ max: 32, message: '不能超过32位字符' }],
                },
              ]"
            /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="证书发行机构" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'certIssueId',
                {
                  rules: [{ max: 14, message: '不能超过14位字符' }],
                },
              ]"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="证书签发日期" v-bind="formItemLayout">
            <a-input v-decorator="['certIssueDate']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="证书签发时间" v-bind="formItemLayout">
            <a-input v-decorator="['certIssueTime']" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="证书描述" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'certDesc',
                {
                  rules: [{ max: 85, message: '不能超过85位字符' }],
                },
              ]"
            /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="证书序列号" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'certDn',
                {
                  rules: [{ max: 256, message: '不能超过256位字符' }],
                },
              ]"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="证书内容" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'certValue',
                {
                  rules: [{ max: 4000, message: '不能超过4000位字符' }],
                },
              ]"
            /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="证书存储类型" v-bind="formItemLayout">
            <a-select v-decorator="['certSaveType']" @change="handleChange">
              <a-select-option value="0">本地数据库存储</a-select-option>
              <a-select-option value="1">加密机</a-select-option>
              <a-select-option value="2">本地文件</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存</a-button
      >
      <a-button @click="onClose" style="margin-left: 0.8rem">取消</a-button>
    </div>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 10 },
};
export default {
  name: "PSecPlanEdit",
  props: {
    pSecPlanEditVisiable: {
      default: false,
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
    };
  },
  computed: {},
  methods: {
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    setFormValues({ ...list }) {
      let fields = [
        "keyType",
        "keyOprType",
        "keyUsage",
        "secPlanStage",
        "secPlanDesc",
        "secPlanStatus",
        "certId",
        "certExpiryDate",
        "certAlgorithmType",
        "certIssueId",
        "certIssueDate",
        "certIssueTime",
        "certDesc",
        "certDn",
        "certValue",
        "certSaveType",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
    },

    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let user = this.form.getFieldsValue();
          user.roleId = user.roleId.join(",");
          user.userId = this.userId;
          user.deptId = this.userDept;
          this.$put("user", {
            ...user,
          })
            .then((r) => {
              this.loading = false;
              this.$emit("success");
              // 如果修改用户就是当前登录用户的话，更新其state
              if (user.username === this.currentUser.username) {
                this.$get(`user/${user.username}`).then((r) => {
                  this.setUser(r.data);
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
  watch: {},
};
</script>
